<template>
        <div class="categpry_list">
            <!-- //顶部严选 -->
            <!-- <div class="hdWraper">
                <van-nav-bar title="严选" left-text="首页"  left-arrow   @click-left="onClickLeft">
                    <template #right>
                      <van-icon name="search" size="18" />
                 </template>
                </van-nav-bar>
             </div> -->
             <!-- 顶部滚动导航栏 -->
             <div >
                <van-tabs v-model:active="active">
                    <van-tab :title="item.name" v-for="item in list_nav" :key="item.id">{{ item.name }}</van-tab>

                </van-tabs>
             </div>
             <!-- //商品信息 -->
             <div class="list">
                <div class="item" v-for="item in list_commodity" :key="item.id" @click="changeDet">
                    <van-image
                    width=100%
                    height="3.45rem"
                    fit="cover"
                    position="left"
                    :src="item.listPicUrl"
                    />
                    <!-- 商品名称 -->
                    <div class="item_name">
                        {{ item.name }}
                    </div>
                    <!-- 商品价格 -->
                    <div class="item_price">
                        <span>¥</span>
                        <span>{{item.counterPrice}}</span>
                    </div>
                </div>
             </div>
        </div>
</template>

<script >
export default {
    name:'Category_list'
}
 
    
  
</script>
<script setup>
import{ref,onMounted,onBeforeMount} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import Category from '../index.vue'
import {defineComponent} from "vue"
import {reqitem_List} from '../../../api/category_list/category_list'
const router=useRouter()
const route = useRoute()
const active = ref(0);
//商品
const list_commodity = ref([])
//导航栏
const list_nav = ref([])
const onClickLeft = () => {
    let result = "/home"
    router.push(result)
}
const changeDet = ()=>{
    let resule1 = '/detail'
    router.push(resule1)
}
  onMounted(async ()=>{
   const resul =await reqitem_List(route.query.id1,route.query.id2)
    console.log("aa",resul)
    list_commodity.value = resul.categoryItems.itemList
    console.log("bb",list_commodity)
    list_nav.value = resul.categoryL2List
    console.log("cc",list_nav)
})
</script>

<style lang="less">
    .categpry_list{
        height: 100%;
        width: 100%;
        padding:0;
        margin: 0;
    }
    .categpry_list .list{
        margin-top: 30px;
        z-index: 12;
        display: flex;
        flex-wrap: wrap;
    }
    .categpry_list .list .item{
        padding:0rem 0.1rem 0.52rem 0.2rem;
        width: 47%;
    }
    .categpry_list .list .item .item_name{
        margin-top: 0.12rem;
        line-height: .4rem;
        text-align: left;
        font-size: .28rem;
        font-weight: 500;
        overflow: hidden;
        color: #12161c;
        font-family: PingFangSC-Regular;
    }
    .categpry_list .list .item .item_price{
        color: rgb(250, 30, 50);
        font-weight: bold;
        font-size: 0.4rem;
    }
</style>